<template>
    <div class="child2">
        <h3>子组件2</h3>
        <h4>电脑：{{ computer }}</h4>
        <h4>哥哥给的玩具：{{ toy }}</h4>
        <h4>父组件给的蛋糕：{{ fathercake }}</h4>
        <button @click="emitter.emit('send-computer',computer)">电脑给哥哥</button>
        <button @click="emitter.emit('send-computer-tofather',computer)">电脑给父组件</button>
    </div>
</template>
<script setup lang="ts" name="ChildDemo2">
import { ref, onUnmounted } from 'vue'
import emitter from '@/utils/emitter';
import { useChildDemo2 } from '@/hooks/use04emittTs';//ts代码实现,实现代码的拆分
let {toy,computer,fathercake,Child2bindEvents}=useChildDemo2()
Child2bindEvents()
</script>

<style scoped>
.child2 {
    margin-top: 50px;
    background-color: orange;
    padding: 10px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
}
</style>